<script setup>
defineOptions({ name: "Contact", index: Infinity });
import { onMounted } from "vue";
import markerIcon from "@/assets/icon/marker.png";

import data from "@/assets/data/data.json";

onMounted(() => {
  var map = new BMapGL.Map("container"); // 创建地图实例
  var center = new BMapGL.Point(116.328349, 39.973656); // 创建点坐标
  map.centerAndZoom(center, 12); // 初始化地图，设置中心点坐标和地图级别
  map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放

  map.setMapStyleV2({
    styleId: "ece326b9a27d2f17bc1d2e6db7390d70",
  }); // 设置地图样式

  var point = new BMapGL.Point(116.328349, 39.973656);

  var myIcon = new BMapGL.Icon(markerIcon, new BMapGL.Size(50, 50));
  // 创建标注对象并添加到地图
  var marker = new BMapGL.Marker(point, { icon: myIcon });
  map.addOverlay(marker);

  marker.addEventListener("click", function (event) {
    //解构赋值
    const { lat, lng } = event.latLng;

    var point = new BMapGL.Point(lng, lat);
    map.setCenter(point);
  });
});
</script>
<template>
  <h1 class="animate__animated animate__slideInLeft">
    {{ data.Home.header[4] }}
  </h1>
  <main><div id="container"></div></main>
</template>
<style scoped lang="less">
h1 {
  font-size: 30px;
  text-align: center;
}
main {
  #container {
    height: 50vh;
    margin: 5vh 10%;
  }
}
</style>
